---
// Importing necessary components
import Meta from "@components/Meta.astro";
import Navbar from "@components/sections/navbar&footer/Navbar.astro";
import FooterSection from "@components/sections/navbar&footer/FooterSection.astro";
import { SITE } from "@data/constants";
import "@styles/global.css";

// Setting expected props
const {
  title = SITE.title,
  meta,
  structuredData,
  lang = "en",
  customDescription = null,
  customOgTitle = null,
} = Astro.props;

// Interface to type-check the properties
interface Props {
  title?: string;
  meta?: string;
  structuredData?: object;
  lang?: string;
  customDescription?: string | null;
  customOgTitle?: string | null;
}
---

<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
  <head>
    {/* Adding metadata to the HTML document */}
    <Meta
      meta={meta}
      structuredData={structuredData}
      customDescription={customDescription}
      customOgTitle={customOgTitle}
    />
    {/* Define the title of the page */}
    <title>{title}</title>
    <script is:inline>
      // Script to handle dark mode. It will check if the theme is stored in localStorage or if dark theme is preferred by system settings
      if (
        localStorage.getItem("hs_theme") === "dark" ||
        (!("hs_theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    </script>
    <script>
      import "@scripts/lenisSmoothScroll.js";
    </script>
  </head>
  <body
    class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800 flex flex-col min-h-screen"
  >
    {/*
    Setting up the main structure of the page.
    The Navbar is placed at the top, with a slot for the main content and FooterSection at the bottom.
    */}
    <div class="w-full mx-auto max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 flex-grow">
      <Navbar />
      <main>
        <slot />
      </main>
    </div>
    <FooterSection />
    <script>
      // https://preline.co
      import "preline/preline.js";
    </script>
    <style>
      /* CSS rules for the page scrollbar */
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }

      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
  </body>
</html>
